<template>
  <div style="width: 500px ; height: 200px">
    wangEditor for vue3
    <button @click="toggle">显示/隐藏</button>
    <BasicEditor v-if="show" ref="header"></BasicEditor>
  </div>
  <div style="background-color: #00feff; height: 200px; width: 200px;margin-left: 500px" v-html="showHtml"></div>
<!--   <ExtendedEditor v-if="show"></ExtendedEditor>-->
</template>

<script>
import BasicEditor from '../components/BasicEditor.vue'
// import ExtendedEditor from '../components/ExtendedEditor.vue'
import {  ref } from "vue";
export default {
  components: {
    BasicEditor,
    // ExtendedEditor,
  },
  data() {
    return {
      show: true,
      showHtml: null,
    }
  },
  methods: {
    toggle() {
      console.log("--------")
      console.log(this.$refs.header.aaa);
      this.showHtml = this.$refs.header.aaa
    }
  },
}
</script>

<style>
</style>
